<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消费者用户管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h2 {
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ccc;
        }
        th {
            background-color: #007bff;
            color: white;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        .button-container {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
        }
        button {
            padding: 10px 15px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #218838;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
            padding-top: 60px;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: 8px;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .form-group {
            margin-bottom: 15px;
        }
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="password"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>所有消费者用户管理</h2>
    <table>
        <thead>
            <tr>
                <th>消费者ID</th>
                <th>消费者姓名</th>
                <th>邮箱</th>
                <th>电话</th>
                <th>好评率</th>
                <th>信用等级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="consumer-list">
            <tr>
                <td>001</td>
                <td>张三</td>
                <td>zhangsan@example.com</td>
                <td>13800000000</td>
                <td>95%</td>
                <td>A级</td>
                <td><button class="edit-button">编辑</button></td>
            </tr>
            <tr>
                <td>002</td>
                <td>李四</td>
                <td>lisi@example.com</td>
                <td>13900000000</td>
                <td>90%</td>
                <td>B级</td>
                <td><button class="edit-button">编辑</button></td>
            </tr>
            <tr>
                <td>003</td>
                <td>王五</td>
                <td>wangwu@example.com</td>
                <td>13700000000</td>
                <td>85%</td>
                <td>C级</td>
                <td><button class="edit-button">编辑</button></td>
            </tr>
        </tbody>
    </table>
    <div class="button-container">
        <button id="addConsumerButton">添加消费者</button>
    </div>
</div>

<!-- 模态框 -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2 id="modalTitle">添加消费者</h2>
        <form id="consumer-form">
            <div class="form-group">
                <label for="consumerId">消费者ID</label>
                <input type="text" id="consumerId" placeholder="请输入消费者ID" required>
            </div>
            <div class="form-group">
                <label for="consumerName">消费者姓名</label>
                <input type="text" id="consumerName" placeholder="请输入消费者姓名" required>
            </div>
            <div class="form-group">
                <label for="consumerEmail">消费者邮箱</label>
                <input type="email" id="consumerEmail" placeholder="请输入消费者邮箱" required>
            </div>
            <div class="form-group">
                <label for="consumerPhone">消费者电话</label>
                <input type="tel" id="consumerPhone" placeholder="请输入消费者电话" required>
            </div>
            <div class="form-group">
                <label for="consumerPassword">消费者密码</label>
                <input type="password" id="consumerPassword" placeholder="请输入消费者密码" required>
            </div>
            <button type="submit">提交</button>
        </form>
    </div>
</div>

<script>
    const modal = document.getElementById("myModal");
    const addConsumerButton = document.getElementById('addConsumerButton');
    const closeModal = document.getElementsByClassName("close")[0];

    // 打开添加消费者模态框
    addConsumerButton.addEventListener('click', function() {
        resetForm();
        document.getElementById('modalTitle').innerText = '添加消费者';
        modal.style.display = "block";
    });

    // 关闭模态框
    closeModal.addEventListener('click', function() {
        modal.style.display = "none";
    });

    window.onclick = function(event) {
        if (event.target === modal) {
            modal.style.display = "none";
        }
    };

    // 编辑按钮点击事件
    document.querySelectorAll('.edit-button').forEach(button => {
        button.addEventListener('click', function() {
            const row = this.parentNode.parentNode;
            document.getElementById('consumerId').value = row.cells[0].innerText;
            document.getElementById('consumerName').value = row.cells[1].innerText;
            document.getElementById('consumerEmail').value = row.cells[2].innerText;
            document.getElementById('consumerPhone').value = row.cells[3].innerText;
            document.getElementById('consumerPassword').value = ''; // 清空密码字段
            document.getElementById('modalTitle').innerText = '编辑消费者';
            modal.style.display = "block";
        });
    });

    // 提交表单事件
    document.getElementById('consumer-form').addEventListener('submit', function(event) {
        event.preventDefault(); // 防止表单提交

        const consumerId = document.getElementById('consumerId').value;
        const consumerName = document.getElementById('consumerName').value;
        const consumerEmail = document.getElementById('consumerEmail').value;
        const consumerPhone = document.getElementById('consumerPhone').value;
        const consumerPassword = document.getElementById('consumerPassword').value;

        // 在这里处理消费者信息的添加或修改逻辑
        alert(`消费者信息已成功 ${document.getElementById('modalTitle').innerText}！\nID: ${consumerId}\n姓名: ${consumerName}\n邮箱: ${consumerEmail}\n电话: ${consumerPhone}`);

        // 关闭模态框
        modal.style.display = "none";
        resetForm();
    });

    function resetForm() {
        document.getElementById('consumerId').value = '';
        document.getElementById('consumerName').value = '';
        document.getElementById('consumerEmail').value = '';
        document.getElementById('consumerPhone').value = '';
        document.getElementById('consumerPassword').value = '';
    }
</script>

</body>
</html>
